<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Select Menus - Photon Admin Panel Theme</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="apple-touch-icon" href="iosicon.png" />
<!--    DEVELOPMENT LESS -->
<!--    <link rel="stylesheet/less" href="css/photon.less" media="all" />
        <link rel="stylesheet/less" href="css/photon-responsive.less" media="all" />-->
<!--    PRODUCTION CSS -->
        <link rel="stylesheet" href="css/css_compiled/photon-min.css" media="all" />
        <link rel="stylesheet" href="css/css_compiled/photon-min-part2.css" media="all" />
        <link rel="stylesheet" href="css/css_compiled/photon-responsive-min.css" media="all" />

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/css_compiled/ie-only-min.css" />
<![endif]-->

<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="css/css_compiled/ie8-only-min.css" />
        <script type="text/javascript" src="js/plugins/excanvas.js"></script>
        <script type="text/javascript" src="js/plugins/html5shiv.js"></script>
        <script type="text/javascript" src="js/plugins/respond.min.js"></script>
        <script type="text/javascript" src="js/plugins/fixFontIcons.js"></script>
<![endif]-->
        
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.pnotify.min.js"></script>

<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins/less-1.3.1.min.js"></script>        
<script type="text/javascript" src="js/plugins/xbreadcrumbs.js"></script>
<script type="text/javascript" src="js/plugins/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.autotab-1.1b.js"></script>
<script type="text/javascript" src="js/plugins/charCount.js"></script>
<script type="text/javascript" src="js/plugins/jquery.textareaCounter.js"></script>
<script type="text/javascript" src="js/plugins/elrte.min.js"></script>
<script type="text/javascript" src="js/plugins/elrte.en.js"></script>
<script type="text/javascript" src="js/plugins/select2.js"></script>
<script type="text/javascript" src="js/plugins/jquery-picklist.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/additional-methods.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="js/plugins/jquery.metadata.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mockjax.js"></script>
<script type="text/javascript" src="js/plugins/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.rating.pack.js"></script>
<script type="text/javascript" src="js/plugins/farbtastic.js"></script>
<script type="text/javascript" src="js/plugins/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jstree.js"></script>
<script type="text/javascript" src="js/plugins/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.stack.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/plugins/raphael.2.1.0.min.js"></script>
<script type="text/javascript" src="js/plugins/justgage.1.0.1.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.clock.js"></script>
<script type="text/javascript" src="js/plugins/jquery.countdown.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jqtweet.js"></script>
<script type="text/javascript" src="js/plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap-fileupload.min.js"></script>
<script type="text/javascript" src="js/plugins/prettify/prettify.js"></script>

<script type="text/javascript" src="js/common.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

    <body class="body-inner">
            
    <div class="btn-toolbar btn-mobile-menus">
        <button class="btn btn-main-menu"></button>
        <button class="btn btn-user-menu"><i class="icon-logo"></i></button>
    </div>

    <div class="nav-fixed-left" style="visibility: hidden">
        <ul class="nav nav-side-menu">
            <li class="shadow-layer"></li>
            <li>
                <a href="dashboard.php">
                    <i class="icon-photon home"></i>
                    <span class="nav-selection">Dashboard</span>
                                    </a>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon list_nested"></i>
                    <span class="nav-selection">Form Elements</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="form-elements-input-fields.php">Input Fields</a>
                        </li>
                        <li>
                            <a href="form-elements-masked-input-fields.php">Masked Input Fields</a>
                        </li>
                        <li>
                            <a href="form-elements-autotabs.php">Autotabs</a>
                        </li>
                        <li>
                            <a href="form-elements-text-areas.php">Text Areas</a>
                        </li>
                        <li>
                            <a href="form-elements-select-menus.php">Select Menus</a>
                        </li>
                        <li>
                            <a href="form-elements-other-form-elements.php">Other Form Elements</a>
                        </li>
                        <li>
                            <a href="form-elements-form-validation.php">Form Validation</a>
                        </li>
                        <li>
                            <a href="form-elements-ui-elements.php">UI Elements</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon chart_alt"></i>
                    <span class="nav-selection">Graphs and Statistics</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="graphs-and-statistics-graphs.php">Graphs</a>
                        </li>
                        <li>
                            <a href="graphs-and-statistics-statistical-elements.php">Statistical Elements</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="typography.php">
                    <i class="icon-photon book_alt2"></i>
                    <span class="nav-selection">Typography</span>
                                    </a>
            </li>
            <li>
                <a href="grid.php">
                    <i class="icon-photon hash"></i>
                    <span class="nav-selection">Grid</span>
                                    </a>
            </li>
            <li>
                <a href="tables.php">
                    <i class="icon-photon new_window"></i>
                    <span class="nav-selection">Tables</span>
                                    </a>
            </li>
            <li>
                <a href="maps.php">
                    <i class="icon-photon map_pin_stroke"></i>
                    <span class="nav-selection">Maps</span>
                                    </a>
            </li>
            <li>
                <a href="sidebar-widgets.php">
                    <i class="icon-photon book_alt"></i>
                    <span class="nav-selection">Sidebar Widgets</span>
                                    </a>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon bolt"></i>
                    <span class="nav-selection">Error Pages</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="error-pages-400-bad-request.php">400 Bad Request</a>
                        </li>
                        <li>
                            <a href="error-pages-401-unauthorized.php">401 Unauthorized</a>
                        </li>
                        <li>
                            <a href="error-pages-403-forbidden.php">403 Forbidden</a>
                        </li>
                        <li>
                            <a href="error-pages-404-page-not-found.php">404 Page Not Found</a>
                        </li>
                        <li>
                            <a href="error-pages-500-internal-server-error.php">500 Internal Server Error</a>
                        </li>
                        <li>
                            <a href="error-pages-503-service-unavailable.php">503 Service Unavailable</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="help.php">
                    <i class="icon-photon info"></i>
                    <span class="nav-selection">Help</span>
                                    </a>
            </li>
            <li class="nav-logout">
                <a href="/">
                    <i class="icon-photon key_stroke"></i><span class="nav-selection">Logout</span>
                </a>
            </li>
        </ul>
    </div>        <div class="nav-fixed-topright" style="visibility: hidden">
    <ul class="nav nav-user-menu">
        <li class="user-sub-menu-container">
            <a href="javascript:;">
                <i class="user-icon"></i><span class="nav-user-selection">Company Name</span><i class="icon-menu-arrow"></i>
            </a>
                        <ul class="nav user-sub-menu">
                                <li>
                    <a href="javascript:;">My Profile</a>
                </li>
                                <li>
                    <a href="javascript:;">Settings</a>
                </li>
                                <li>
                    <a href="javascript:;">Messages</a>
                </li>
                                <li>
                    <a href="javascript:;">Help</a>
                </li>
                            </ul>
                    </li>
        <li>
            <a href="javascript:;">
                <i class="icon-photon mail"></i>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <i class="icon-photon comment_alt2_stroke"></i>
                <div class="notification-count">12</div>
            </a>
        </li>
    </ul>
</div>

<script>
    $(function(){
        setTimeout(function(){
            $('.nav-fixed-topright').removeAttr('style');
        }, 300);
        
        $(window).scroll(function(){
            if($('.breadcrumb-container').length){
                var scrollState = $(window).scrollTop();
                if (scrollState > 0) $('.nav-fixed-topright').addClass('nav-released');
                else $('.nav-fixed-topright').removeClass('nav-released')
            }
        });
        
        $('.user-sub-menu-container').on('click', function(){
            $(this).toggleClass('active-user-menu');
        });
    });
</script>

        
<div class="panel">
    <div class="panel-content filler">
        <div class="panel-logo"></div>
        <div class="panel-header">
            <h1><small>Select Menus</small></h1>
            <button type="submit" class="btn btn-mini"><i class="icon-photon move_alt2"></i> Add New</button>
        </div>
        <div class="panel-search container-fluid">
            <form class="form-horizontal" action="javascript:;" />
                <input id="panelSearch" placeholder="Search" type="text" name="panelSearch" />
                <button class="btn btn-search"></button>
                <script>
                    $().ready(function(){
                        var searchTags = [
                            "Dashboard",
                            "Form Elements",
                            "Graphs and Statistics",
                            "Typography",
                            "Grid",
                            "Tables",
                            "Maps",
                            "Sidebar Widgets",
                            "Error Pages",
                            "Help",
                            "Input Fields",
                            "Masked Input Fields",
                            "Autotabs",
                            "Text Areas",
                            "Select Menus",
                            "Other Form Elements",
                            "Form Validation",
                            "UI Elements",
                            "Graphs",
                            "Statistical Elements",
                            "400 Bad Request",
                            "401 Unauthorized",
                            "403 Forbidden",
                            "404 Page Not Found",
                            "500 Internal Server Error",
                            "503 Service Unavailable"
                        ];
                        $( "#panelSearch" ).autocomplete({
                            source: searchTags
                        });
                    });            
                </script>
            </form>
        </div>
                    <script type="text/javascript">
        $(function () {
            $("#jstree").jstree({ 
                "json_data" : {
                    "data" : [
                                                {
                            "data" : { 
                                "title" : "Simple Select Box", 
                                "attr" : { "href" : "#Simple_Select_Box" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Simple Select Box with Filter Search", 
                                "attr" : { "href" : "#Simple_Select_Box_with_Filter_Search" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Simple Multiple Select Box", 
                                "attr" : { "href" : "#Simple_Multiple_Select_Box" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Multiple Select Box with Filter Search", 
                                "attr" : { "href" : "#Multiple_Select_Box_with_Filter_Search" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Dual Multi Select with Filter Search", 
                                "attr" : { "href" : "#Dual_Multi_Select_with_Filter_Search" } 
                            }
                        },
                                            ]
                },
                "plugins" : [ "themes", "json_data", "ui" ]
            })
            .bind("click.jstree", function (event) {
                var node = $(event.target).closest("li");
                document.location.href = node.find('a').attr("href");
                return false;
            })
            .delegate("a", "click", function (event, data) { event.preventDefault(); });
        });
    </script>
        <div class="sidebarMenuHolder">
        <div class="JStree">
            <div class="Jstree_shadow_top"></div>
            <div id="jstree"></div>
            <div class="Jstree_shadow_bottom"></div>
        </div>
    </div>    </div>
    <div class="panel-slider">
        <div class="panel-slider-center">
            <div class="panel-slider-arrow"></div>
        </div>
    </div>
</div>
        <div class="main-content">
            <div class="breadcrumb-container">
    <ul class="xbreadcrumbs">
        <li>
            <a href="dashboard.php">
                <i class="icon-photon home"></i>
            </a>
        </li>
                <li>
            <a href="#">Form Elements</a>
            <ul class="breadcrumb-sub-nav">
                                <li>
                    <a href="form-elements-input-fields.php">Input Fields</a>
                </li>
                                <li>
                    <a href="form-elements-masked-input-fields.php">Masked Input Fields</a>
                </li>
                                <li>
                    <a href="form-elements-autotabs.php">Autotabs</a>
                </li>
                                <li>
                    <a href="form-elements-text-areas.php">Text Areas</a>
                </li>
                                <li>
                    <a href="form-elements-select-menus.php">Select Menus</a>
                </li>
                                <li>
                    <a href="form-elements-other-form-elements.php">Other Form Elements</a>
                </li>
                                <li>
                    <a href="form-elements-form-validation.php">Form Validation</a>
                </li>
                                <li>
                    <a href="form-elements-ui-elements.php">UI Elements</a>
                </li>
                            </ul>
        </li>
                <li class="current">
            <a href="javascript:;">Select Menus</a>
        </li>
    </ul>
</div>            <header>
                <i class="icon-big-notepad"></i>
                <h2><small>Select Menus</small></h2>
                <h3><small>Driven off native select elements, allows easy data selection.</small></h3>
            </header>
            <form class="form-horizontal" />
                <div class="container-fluid">

                        <div class="form-legend">Select Menus</div>

                        <!--Simple Select Box begin-->
                        <div id="Simple_Select_Box" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="simpleSelectBox">Simple Select Box</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <select name="simpleSelectBox" id="simpleSelectBox">
                                        <option selected="" value="All" />All
                                        <option value="Beige" />Beige
                                        <option value="Black" />Black
                                        <option value="Blue" />Blue
                                        <option value="Bronze" />Bronze
                                        <option value="Brown" />Brown
                                        <option value="Gold" />Gold
                                        <option value="Gray" />Gray
                                        <option value="Green" />Green
                                        <option value="Orange" />Orange
                                        <option value="Pink" />Pink
                                        <option value="Purple" />Purple
                                        <option value="Red" />Red
                                        <option value="Silver" />Silver
                                        <option value="Turquoise" />Turquoise
                                        <option value="White" />White
                                        <option value="Yellow" />Yellow
                                    </select>
                                </div>
                            </div>
                            <script>
                                $().ready(function(){
                                    $("#simpleSelectBox").select2({
                                        dropdownCssClass: 'noSearch'
                                    });
                                });
                            </script>
                        </div>
                        <!--Simple Select Box end-->

                        <!--Select Box with Filter Search begin-->
                        <div id="Simple_Select_Box_with_Filter_Search" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="selectBoxFilter">Select Box with Filter Search</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <select name="selectBoxFilter" id="selectBoxFilter">
                                        <option selected="" value="All" />All
                                        <option value="Beige" />Beige
                                        <option value="Black" />Black
                                        <option value="Blue" />Blue
                                        <option value="Bronze" />Bronze
                                        <option value="Brown" />Brown
                                        <option value="Gold" />Gold
                                        <option value="Gray" />Gray
                                        <option value="Green" />Green
                                        <option value="Orange" />Orange
                                        <option value="Pink" />Pink
                                        <option value="Purple" />Purple
                                        <option value="Red" />Red
                                        <option value="Silver" />Silver
                                        <option value="Turquoise" />Turquoise
                                        <option value="White" />White
                                        <option value="Yellow" />Yellow
                                    </select>
                                </div>
                            </div>
                            <script>
                                $().ready(function(){
                                    $("#selectBoxFilter").select2();
                                });
                            </script>
                        </div>
                        <!--Select Box with Filter Search end-->

                        <!--Simple Multiple Select Box begin-->
                        <div id="Simple_Multiple_Select_Box" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="simpleMulti">Simple Multiple Select Box</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <select multiple="" name="simpleMulti" id="simpleMulti">
                                        <option value="Beige" />Beige
                                        <option selected="" value="Black" />Black
                                        <option selected="" value="Blue" />Blue
                                        <option value="Bronze" />Bronze
                                        <option selected="" value="Brown" />Brown
                                        <option value="Gold" />Gold
                                        <option value="Gray" />Gray
                                        <option value="Green" />Green
                                        <option value="Orange" />Orange
                                        <option value="Pink" />Pink
                                        <option value="Purple" />Purple
                                        <option value="Red" />Red
                                        <option value="Silver" />Silver
                                        <option value="Turquoise" />Turquoise
                                        <option value="White" />White
                                        <option value="Yellow" />Yellow
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!--Simple Multiple Select Box end-->

                        <!--Multiple Select Box with Filter Search begin-->
                        <div id="Multiple_Select_Box_with_Filter_Search" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="multiFilter">Multiple Select Box with Filter Search</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <select multiple="" name="multiFilter" id="multiFilter">
                                        <option value="Beige" />Beige
                                        <option value="Black" />Black
                                        <option value="Blue" />Blue
                                        <option value="Bronze" />Bronze
                                        <option value="Brown" />Brown
                                        <option value="Gold" />Gold
                                        <option value="Gray" />Gray
                                        <option value="Green" />Green
                                        <option value="Orange" />Orange
                                        <option value="Pink" />Pink
                                        <option value="Purple" />Purple
                                        <option value="Red" />Red
                                        <option value="Silver" />Silver
                                        <option selected="" value="Turquoise" />Turquoise
                                        <option value="White" />White
                                        <option value="Yellow" />Yellow
                                    </select>
                                </div>
                            </div>
                            <script>
                                $().ready(function(){
                                    $("#multiFilter").select2();
                                });
                            </script>
                        </div>
                        <!--Multiple Select Box with Filter Search end-->

                        <!--Dual Multi Select begin-->
                        <div id="Dual_Multi_Select_with_Filter_Search" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="dualMulti">Dual Multi Select</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <select multiple="" name="dualMulti" id="dualMulti">
                                        <option selected="" value="Beige" />Beige
                                        <option value="Black" />Black
                                        <option value="Blue" />Blue
                                        <option value="Bronze" />Bronze
                                        <option value="Brown" />Brown
                                        <option selected="" value="Gold" />Gold
                                        <option selected="" value="Gray" />Gray
                                        <option value="Green" />Green
                                        <option value="Orange" />Orange
                                        <option value="Pink" />Pink
                                        <option value="Purple" />Purple
                                        <option value="Red" />Red
                                        <option value="Silver" />Silver
                                        <option value="Turquoise" />Turquoise
                                        <option value="White" />White
                                        <option value="Yellow" />Yellow
                                    </select>
                                </div>
                            </div>
                            <script>
                                $().ready(function(){
                                    $("#dualMulti").pickList();
                                });
                            </script>
                        </div>
                        <!--Dual Multi Select end-->


                </div><!-- end container -->
            </form>
        </div>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1936460-27']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
    </body>
</html>